<template>
	<div>
		<div v-if="!addVisible">
			<div class="topTitle">商品列表</div>
			<el-form :model="query" inline label-width="auto">
				<el-form-item label="商品名称">
					<el-input v-model="query.searchWord" placeholder="请输入商品名称" class="width260 margin-right10"></el-input>
				</el-form-item>
				<el-form-item label="商品类目">
					<el-select v-model="query.type" placeholder="请选择商品类目">
						<el-option label="课程" :value="1"></el-option>
						<el-option label="图书" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品分类">
					<el-select v-model="query.categoryId" placeholder="请选择商品分类">
						<el-option v-for="(item, index) in shopCategory" :key="index" :value="item.id" :label="item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发布地区">
					<el-cascader :props="props" v-model="query.city" :options="areaData" placeholder="请选择地区"
						class="width260 margin-right10"></el-cascader>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">查询</el-button>
					<el-button @click="handleRefresh">重置</el-button>
				</el-form-item>
			</el-form>
			<div class="margin-top20 margin-bottom20">
				<el-button type="primary" @click="handleAdd({})">新建</el-button>
				<el-button type="primary" @click="batchDel">批量删除</el-button>
			</div>
			<el-table ref="multipleTable" :data="tableData" style="margin-top: 20px;" border
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" align="center"></el-table-column>
				<el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
				<el-table-column label="商品图片">
					<template slot-scope="scope">
						<div class="row-me" v-if="scope.row.picture">
							<el-image v-for="(item,index) in scope.row.picture.split(',')" :key="index"
								class="width60 height60 margin-right10" :src="item" fit="scale-down"
								:preview-src-list="[item]"></el-image>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称" width="500">
					<template slot-scope="scope">
						<div class="line1">{{ scope.row.name }}</div>
					</template>
				</el-table-column>
				<el-table-column label="商品类目" align="center">
					<template slot-scope="{row}">
						<span>{{ row.type == 1 ? '课程' : row.type == 2 ? '图书' : '' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="categoryName" label="商品分类" align="center"></el-table-column>
				<el-table-column label="所属地区" align="center">
					<template slot-scope="scope">
						<div class="row-me row-center">
							<el-tag v-if="scope.row.provinceName">{{ scope.row.provinceName }}</el-tag>
							<el-tag v-if="scope.row.cityName&&scope.row.province!=0">{{ scope.row.cityName }}</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="target" label="报考类型" align="center"></el-table-column></el-table-column>
				<el-table-column label="价格(元)" align="center" prop="defaultItems.price"></el-table-column>
				<el-table-column label="库存" align="center" prop="defaultItems.storeCount"></el-table-column>
				<el-table-column label="销量" align="center" prop="defaultItems.saleCount"></el-table-column>
				<el-table-column label="排序" prop="sort"></el-table-column>
				<el-table-column label="评价">
					<template slot-scope="scope">
						<el-button type="text" @click="viewComments(scope.row.id)">查看评价</el-button>
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.isGround" @change="(val)=>groundChange(val,scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="120" fixed="right">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="handleAdd(scope.row)">编辑</el-button>
						<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row.id)">
							<el-button slot="reference" type="text" size="small">删除</el-button>
						</el-popconfirm>
						<el-button type="text" size="small"></el-button>
						<el-dropdown>
							<span class="el-dropdown-link" style="color: #1890ff;font-size: 12px;">更多 </span>
							<el-dropdown-menu slot="dropdown" align="center" style="color: #1890ff;">
								<el-dropdown-item @click.native="give(scope.row)" v-if="scope.row.type == 1">
									<span>赠送</span>
								</el-dropdown-item>
								<el-dropdown-item @click.native="topping(scope.row)">
									{{ scope.row.recommend ? '取消置顶' : '置顶' }}
								</el-dropdown-item>
								<el-dropdown-item @click.native="splitSet(scope.row)"><span>分成设置</span>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
					@current-change="handlePageChange">
				</el-pagination>
			</div>
		</div>

		<!-- 查看评价弹框 -->
		<el-dialog title="查看评价" :visible.sync="dialogVisibleviewComments" width="60%">
			<!-- 查看评价tab -->
			<el-table ref="multipleTable" :data="commentData" tooltip-effect="dark" style="width:1077px" border>
				<el-table-column type="selection" width="65" align="center">
				</el-table-column>
				<el-table-column label="用户头像" width="130" align="center">
					<template slot-scope="scope">
						<img :src="scope.row.userIcon" alt="" class="width50 height50 radius50per">
					</template>
				</el-table-column>
				<el-table-column prop="userName" label="用户昵称" width="130" align="center">
				</el-table-column>
				<el-table-column prop="content" label="评价内容" width="220" align="center">
				</el-table-column>
				<el-table-column prop="thumbUp" label="点赞" width="130" align="center">
				</el-table-column>
				<el-table-column label="状态" width="130" align="center">
					<template slot-scope="{row}">
						<span>{{ row.status == 0 ? '未审核' : row.status == 1 ? '已审核' : row.status == 2 ? '审核失败' : '' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="评论时间" width="140" align="center">
				</el-table-column>
				<el-table-column prop="name" label="是否回复" width="130" align="center">
					<template slot-scope="{row}">
						<span>{{ row.replay ? '已回复' : '未回复' }}</span>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisibleviewComments = false">关闭</el-button>
			</span>
		</el-dialog>

		<!-- 赠送弹窗 -->
		<el-dialog title="赠送商品" :visible.sync="dialogVisiblegive" width="60%">
			<el-form ref="form" :model="form" label-width="100">
				<el-form-item label="商品名称:">
					<span class="bigText">2020年下半年教师资格证考试套题</span>
				</el-form-item>
				<el-form-item label="选择赠送用户:">
					<div class="row-me">
						<el-input v-model="form.search" placeholder="请输入用户昵称/ID或手机号" class="width250"></el-input>
						<el-button class="margin-left10" type="primary" @click="getUserPage">确认</el-button>
					</div>
					<div class="margin-top20">
						<el-tag class="margin-right5" v-for="(item, index) in userData" :key="item.id" closable
							:disable-transitions="false" @close="handleClose(item, index)">
							{{ item.name }}
						</el-tag>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblegive = false">取消</el-button>
				<el-button type="primary" @click="clickSend">确认赠送</el-button>
			</span>
		</el-dialog>

		<!-- 分成设置弹窗 -->
		<el-dialog title="设置分成比例" :visible.sync="dialogVisibleset" width="60%">
			<el-form ref="rewardParams" :model="rewardParams" label-width="120px">
				<el-form-item label="商品名称:">
					<span class="bigText">{{commodityObj.name||''}}</span>
				</el-form-item>
				<el-form-item label="课程分成方式:">
					<div class="row-me row-center height50">
						<el-radio v-model="rewardParams.type" :label="1">固定金额</el-radio>
						<div class="row-me" v-if="rewardParams.type==1">
							<el-input class="width400" v-model="rewardParams.value" placeholder="请输入金额"></el-input>
							<span class="margin-left10">元</span>
						</div>
					</div>
					<div class="row-me row-center height50">
						<el-radio v-model="rewardParams.type" :label="2">固定比例</el-radio>
						<div class="row-me" v-if="rewardParams.type==2">
							<el-input class="width400" v-model="rewardParams.value" placeholder="请输入金额"></el-input>
							<span class="margin-left10">%</span>
						</div>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleset = false">取消</el-button>
				<el-button type="primary" @click="updateReward">确认</el-button>
			</span>
		</el-dialog>

		<addCommodity v-if="addVisible" ref="addCommodity" @handleOk="handleOk"></addCommodity>
	</div>
</template>

<script>
	import addCommodity from "@/components/addCommodity"
	export default {
		components: {
			addCommodity
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				tableData: [],
				shopCategory: [],
				props: {
					emitPath: false,
					value: 'id',
					label: 'name',
					checkStrictly: true,
				},
				areaData: [],
				dialogVisibleviewComments: false,
				commentData: [],
				form: {},
				rewardParams: {},
				commodityObj: {},
				dialogVisiblegive: false,
				productId: '',
				dynamicTags: [],
				userData: [],
				addVisible: false,
				multipleSelection: [],
				rewardParams: {},
				commodityObj: {},
				dialogVisibleset: false
			}
		},
		mounted() {
			this.selectShop()
			this.getAllArea()
			this.getData()
		},
		methods: {
			async updateReward() {
				this.rewardParams.id = this.commodityObj.id
				const res = await this.$postForm('/admin/mall/updateReward', this.rewardParams)
				this.$message.success('操作成功')
				this.getData()
				this.dialogVisibleset = false
			},
			// 分成设置
			splitSet(row) {
				this.rewardParams = {
					type: 1,
					value: ''
				}
				this.commodityObj = row
				this.dialogVisibleset = true;
			},
			//上下架
			async groundChange(val, row) {
				const res = await this.$postForm('/admin/mall/mallProductUpdate', {
					id: row.id,
					isGround: val
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			handleOk() {
				this.addVisible = false
				this.getData()
			},
			async clickSend() {
				let ids = Array.from(this.userData, ({
					id
				}) => id)
				const res = await this.$post(`/admin/mall/sendProductToUser?productId=${this.productId}`, ids)
				this.$message.success('操作成功')
				this.getData()
				this.dialogVisiblegive = false
			},
			async getUserPage() {
				if (this.$.isEmpty(this.form.search)) return
				const res = await this.$get('/admin/user/findByIdTelName', {
					search: this.form.search

				})
				this.userData = res.data
			},
			// 赠送
			give(row) {
				this.productId = row.id
				this.dialogVisiblegive = true
			},
			// 可编辑标签tag
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},

			//置顶
			async topping(row) {
				let recommend = row.recommend ? false : true
				const res = await this.$postForm('/admin/mall/recommend', {
					id: row.id,
					recommend: recommend
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			// 查看评价
			async viewComments(id) {
				const res = await this.$postForm('/admin/mall/getCommentReply', {
					commentId: id
				})
				this.commentData = res.data
				this.dialogVisibleviewComments = true
			},
			//删除
			async handleDel(id) {
				const res = await this.$postForm('/admin/mall/deleteProduct', {
					id
				})
				if (res.code == 1000) {
					this.getData();
					this.$message.success('删除成功')
				}
			},
			//新增编辑
			handleAdd(row) {
				this.addVisible = true
				setTimeout(() => {
					this.$refs.addCommodity.show(row)
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//批量删除
			batchDel() {
				this.$confirm('确定要批量删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.multipleSelection.length == 0) return
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					this.$post('/admin/mall/deleteProductAll', ids).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
						}
					})
				}).catch(() => {})
			},
			async getData() {
				const res = await this.$get('/admin/mall/pageProduct', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaData = res.data
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0'
					})
				}
			},
			// 商品分类下拉
			async selectShop() {
				const res = await this.$get('/admin/mall/getAllCategory')
				this.shopCategory = res.data
			},
		}
	}
</script>

<style></style>